<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>demo</title>
<style>
*{padding:0; margin:0}
body{font-size:12px; font-family:"微软雅黑","宋体"; color:#333;}
h1{font-size:16px; background:#ccc; padding:5px 10px; margin-bottom:15px}
.effect{ margin-bottom:15px; padding:0 10px}
button{width:50px;}
/* Clear Fix */ 
.clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }
.clearfix { display:inline-block; }
/* Hide from IE Mac \*/ 
.clearfix { display:block; }
/* End hide from IE Mac */ 
/*focus*/
#focus,#focus1,#focus2{ width:564px; height:293px; padding:5px; border:1px solid #ccc;}
#focus1,#focus2{position:relative; overflow:hidden; padding:0}
#focus img{position:absolute}
#focus1 img{ float:left;}
#ctr,#ctr1,#ctr2{ margin-top:10px; width:100px;}
#ctr span,#ctr1 span,#ctr2 span{ display:inline-block; width:18px; height:18px; line-height:18px; border:1px solid #ccc; text-align:center; cursor:pointer}
#ctr span.current,#ctr1 span.current,#ctr2 span.current{background:#0068b7; color:white}
.btn{margin-top:10px;}
</style>
<script type="text/javascript" src="../js/min/base-min.js"></script>
<script type="text/javascript" src="../js/min/Focus-min.js"></script>
</head>

<body>
<div class="effect clearfix" id="e1">
    <pre>调用方法：
new Focus("focus", "img", "ctr", "span", {event:"mouseover", index:"random", timeout:5000});
    </pre>
	<div id="focus"><img style="display:none" src="../img/focus1.jpg"/><img style="display:none" src="../img/focus2.jpg"/><img style="display:none" src="../img/focus3.jpg"/><img style="display:none" src="../img/focus4.jpg"/></div>
	<div id="ctr"><span>1</span> <span>2</span> <span>3</span> <span>4</span></div>
	<div class="btn"><button onclick="f1.prev()">PREV</button> <button onclick="f1.next()">NEXT</button></div>
	<br>
    <pre>调用方法：
new Focus("focus1", "img", "ctr1", "span",{effect:"scroll", scrollDir:"Left", event:"mouseover", index:"random"
, scrollMode:2});
    </pre>
	<div id="focus1"><img src="../img/focus1.jpg"/><img src="../img/focus2.jpg"/><img src="../img/focus3.jpg"/><img src="../img/focus4.jpg"/></div>
	<div id="ctr1"><span>1</span> <span>2</span> <span>3</span> <span>4</span></div>
	<div class="btn"><button onclick="f2.prev()">PREV</button> <button onclick="f2.next()">NEXT</button></div>
	<br>
    <pre>调用方法：
new Focus("focus2", "img", "ctr2", "span",{effect:"scroll", scrollDir:"Top", index:"random"});
    </pre>
	<div id="focus2"><img src="../img/focus1.jpg"/><img src="../img/focus2.jpg"/><img src="../img/focus3.jpg"/><img src="../img/focus4.jpg"/></div>
	<div id="ctr2"><span>1</span> <span>2</span> <span>3</span> <span>4</span></div>
	<div class="btn"><button onclick="f3.prev()">PREV</button> <button onclick="f3.next()">NEXT</button></div>
</div>
</body>
<script>
window.onload = function(){
	f1 = new Focus("focus", "img", "ctr", "span", {event:"mouseover", index:"random", timeout:5000});
	f2 = new Focus("focus1", "img", "ctr1", "span",{effect:"scroll", scrollDir:"Left", event:"mouseover", index:"random", scrollMode:2});
	f3 = new Focus("focus2", "img", "ctr2", "span",{effect:"scroll", scrollDir:"Top", index:"random"});
}
</script>
</body>
</html>
